<template>
  <div class="login-modal">
    <div class="mask" @click="setIsShowLoginModal(false)"></div>
    <div class="login-box">
      <img
        @click="setIsShowLoginModal(false)"
        src="../assets/img/close.png"
        alt=""
        class="close"
      />
      <ul class="title">
        <li
          :class="isPhoneLogin ? 'active' : ''"
          @click="setIsPhoneLogin(true)"
        >
          手机号码登录
        </li>
        <li style="cursor: auto">|</li>
        <li :class="!isPhoneLogin ? 'active' : ''" @click="weixinClick">
          微信扫码登录
        </li>
      </ul>
      <div class="body">
        <div v-show="isPhoneLogin" class="phone-login">
          <div class="input-group">
            <input
              class="phone-input"
              type="text"
              v-model="phoneNum"
              placeholder="请输入手机号码"
            />
          </div>
          <div class="input-group">
            <slide-verify
              :l="42"
              :r="20"
              :w="362"
              :h="140"
              :slider-text="msg"
              @success="onSuccess"
              @fail="onFail"
              @refresh="onRefresh"
              :style="{ with: '100%' }"
              class="slide-box"
              ref="slideBlock"
            ></slide-verify>
          </div>
          <div class="input-group">
            <input v-model="smsCode" type="text" placeholder="请输入验证码" />
            <div class="login-btn code-btn">
              <span v-if="isSent">{{ count }}s</span>
              <span @click="getSmsCode" v-else>获取验证码</span>
            </div>
          </div>
          <div @click="phoneLogin" class="login-btn">登录</div>
        </div>
        <div id="weixin" v-show="!isPhoneLogin" class="wechat-login">
          微信扫码登录界面
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { SendSMSApi, PhoneSubmitApi, WeChatBindPhoneApi } from '../request/api'
import { validatePhoneNumber } from '../utils/index'
import { useToast } from '../utils/index'

export default {
  data () {
    return {
      phoneNum: '',
      msg: '向右滑动',
      isSlideSure: false,
      smsCode: '',
      isSent: false,
      count: 60,
      timer: null
    }
  },
  computed: {
    ...mapState({
      isPhoneLogin: state => state.loginStatus.isPhoneLogin
    })
  },
  mounted () {
    let _this = this
    new WxLogin({
      id: 'weixin',
      appid: "wx67cfaf9e3ad31a0d",
      scope: "snsapi_login",
      redirect_uri: "https://sc.wolfcode.cn/cms/wechatUsers/shop/PC",
      state: encodeURIComponent(window.btoa("http://localhost:3000" + _this.$route.path)),
      href: "data:text/css;base64,Lyogd3hsb2dpbi5jc3MgKi8NCi5pbXBvd2VyQm94IC50aXRsZSwgLmltcG93ZXJCb3ggLmluZm97DQogIGRpc3BsYXk6IG5vbmU7DQp9DQoNCi5pbXBvd2VyQm94IC5xcmNvZGV7DQogIG1hcmdpbi10b3A6IDIwcHg7DQp9"
    })
  },
  methods: {
    // ...mapMutations("showLoginModal", { setIsShowLoginModal: "setIsShowLoginModal"})
    ...mapMutations({
      setIsShowLoginModal: 'showLoginModal/setIsShowLoginModal',
      setIsLogined: 'loginStatus/setIsLogined',
      setIsPhoneLogin: 'loginStatus/setIsPhoneLogin',
    }),
    onSuccess () {
      this.msg = '验证成功'
      this.isSlideSure = true
    },
    onFail () {
      this.onRefresh()
    },
    onRefresh () {
      this.msg = '再试一次'
    },
    weixinClick () {
      this.setIsPhoneLogin(false)
    },
    verifyFn () {
      if (!validatePhoneNumber(this.phoneNum)) {
        useToast('请输入手机号码', 'warning')
        return false
      }
      if (!this.isSlideSure) {
        useToast('请完成滑块验证', 'warning')
        return false
      }
      return true
    },
    async getSmsCode () {

      if (!this.verifyFn()) return

      let res = await SendSMSApi({
        phone: this.phoneNum
      })
      console.log(res)
      // 15632145678

      if (!res) return

      this.isSent = true
      this.countDown()

    },


    countDown () {
      this.timer = setInterval(() => {
        this.count--
        if (this.count == 0) {
          clearInterval(this.timer)
          this.isSent = false
          this.count = 60
        }
      }, 1000)
    },
    async phoneLogin () {
      if (!this.verifyFn()) return
      if (!this.smsCode.trim()) {
        useToast('验证码输入为空', 'warning')
        return
      }
      const uuid = localStorage.getItem('uuid')
      let res = null
      if (uuid) {
        res = await WeChatBindPhoneApi({
          verifyCode: this.smsCode,
          phone: this.phoneNum,
          uuid
        })

      } else {
        res = await PhoneSubmitApi({
          verifyCode: this.smsCode,
          phone: this.phoneNum
        })
      }
      console.log(res)
      if (!res) return
      useToast('登陆成功', 'success')
      setTimeout(() => {
        this.setIsShowLoginModal(false)
        this.setIsLogined(true)
        localStorage.setItem('x-auth-token', res['x-auth-token'])
        console.log(this.$route.path)
        if(uuid){
          localStorage.removeItem('uuid')
          this.$router.push(this.$route.path)
        }
      }, 1500)
      

    }
  }
}
</script>

<style lang="less" scoped>
@import url("@/assets/css/global.less");

.login-modal {
  width: 100%;
  height: 100%;
  position: fixed;
  inset: 0;
  .mask {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .login-box {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 500px;
    height: 400px;
    border-radius: 20px;
    background: url("../assets/img/loginBackground.jpg");
    background-size: cover;
    .close {
      position: absolute;
      right: 10px;
      top: 10px;
      cursor: pointer;
    }
    .title {
      display: flex;
      justify-content: center;
      padding-top: 40px;
      font-size: 18px;
      color: #ccc;
      li {
        margin: 0 10px;
        cursor: pointer;
      }
      .active {
        color: #333;
      }
    }
    .body {
      .phone-login {
        width: 360px;
        margin: 25px auto 0;
        .input-group {
          display: flex;
          justify-content: space-between;
          margin-bottom: 20px;
          input {
            flex: 1;
            border: 1px solid #dedede;
            text-indent: 14px;
          }
          .phone-input {
            height: 50px;
          }
          .code-btn {
            width: 100px;
            margin-left: 10px;
            font-size: 16px;
          }
        }
        .login-btn {
          height: 50px;
          line-height: 50px;
          color: #fff;
          text-align: center;
          font-size: 18px;
          cursor: pointer;
          background-color: @base-color;
        }
      }
      .wechat-login {
        text-align: center;
      }
    }
  }
}

#slideVerify {
  margin-top: -15px;
}

/deep/ .slide-box {
  width: 100%;
  position: relative;
  canvas {
    position: absolute;
    left: 0;
    top: -120px;
    display: none;
    width: 100%;
  }
  .slide-verify-block {
    width: 85px;
    height: 136px;
  }
  .slide-verify-refresh-icon {
    top: -120px;
    display: none;
  }
  &:hover {
    canvas {
      display: block;
    }
    .slide-verify-refresh-icon {
      display: block;
    }
  }
}
</style>